<template>
	<view id="user_userInfo">
		<!-- 顶部个人信息 -->
		<view class="user_userInfo_top">
			<u-cell-group>
				<u-cell
					title="头像"
					@click="changeInfo('avatar')"
					:isLink="true"
					size="large"
				>
					<u-image
						width="80rpx"
						height="80rpx"
						shape="circle"
						slot="value"
						:src="userInfo.avatar"
					></u-image>
				</u-cell>
				<!-- 头像上传方式选择 -->
			<!-- 	<u-action-sheet
					@close="UploaSheetShow = false"
					:closeOnClickOverlay="true"
					cancelText="取消"
					round="16rpx"
					:actions="UploadAlist"
					:show="UploaSheetShow"
					@select="picSelect"
				></u-action-sheet> -->
				<u-cell
					title="账号"
					:value="userInfo.name"
					:isLink="false"
					size="large"
				></u-cell>
				<u-cell
					title="昵称"
					:value="userInfo.name"
					:isLink="true"
					size="large"
					@click="changeInfo('nickName')"
				></u-cell>
				<!-- <u-cell
					title="真实姓名"
					:value="userInfo.client_name"
					:isLink="true"
					size="large"
					@click="changeInfo('realName')"
				></u-cell>
				<u-cell
					title="生日"
					:value="userInfo.value1"
					:isLink="true"
					size="large"
					@click="changeInfo('birthday')"
				></u-cell>

				<u-cell
					@click="changeInfo('gender')"
					title="性别"
					:value="
						infoList.client_gender == 1
							? '男'
							: infoList.client_gender == 0
							? '女'
							: ''
					"
					:isLink="true"
					size="large"
				></u-cell> -->
				<!-- 选择性别 -->
				
				<u-cell
					title="手机"
					:value="userInfo.phone"
					size="large"
					:isLink="true"
					@click="changeInfo('mobilePhone')"
				></u-cell>
				
			</u-cell-group>
			<button open-type="contact">联系客服</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			dateShow: false,
			UploaSheetShow: false,
			sexShow: false, //性别选择
			currentCacheSize: 0,
			UploadAlist: [
				{
					name: '拍照'
				},
				{
					name: '相册'
				}
			],
			sexlist: [
				{
					name: '男'
				},
				{
					name: '女'
				}
			],
			infoList: {
				value1:''
			} ,//用户信息详情
			userInfo:{}
		};
	},
	onReady() {
		// 微信小程序需要用此写法
		// this.$refs.datetimePicker.setFormatter(this.formatter);
	},
	onShow() {
		this.userInfo =  uni.getStorageSync('userInfo')
	},
	methods: {
		changeInfo(type){
			uni.navigateTo({
				url:`../${type}/${type}`
			})
		},
		formatter(type, value) {
			if (type === 'year') {
				return `${value}年`;
			}
			if (type === 'month') {
				return `${value}月`;
			}
			if (type === 'day') {
				return `${value}日`;
			}
			return value;
		},
		
		confirmDate(e){
			let time = new Date(e.value);
			let y = time.getFullYear();
			let m = time.getMonth() + 1;
			let d = time.getDate();
			
			this.infoList.value1 = y+'-'+add0(m)+'-'+add0(d);
			function add0(m){return m<10?'0'+m:m }
			this.dateShow = false
		},
		picSelect() {},
		changeName() {}
	}
};
</script>

<style lang="scss" scoped>
#user_userInfo {
	height: 100%;
	width: 100%;
	background: #f7fafd;
	position: relative;
	// 顶部个人信息
	& .user_userInfo_top {
		margin-bottom: 24rpx;
		background: #fff;
		& .user_userInfo_topImge {
			width: 104rpx;
			height: 104rpx;
			border-radius: 50%;
		}
		& .user_userInfo_topHeadImg {
			color: #77818e;
		}
	}
	// 底部程序相关
	& .user_userInfo_bottom {
		background: #fff;
	}
	// 退出按钮
	& .user_userInfo_signOut {
		// position: fixed;
		margin-top: 80rpx;
		width: 100%;
		padding: 0 32rpx;
		display: flex;

		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		// margin-top: 312rpx;
		& p {
			width: 100%;

			height: 96rpx;
			background: #e5f8f4;
			border-radius: 48rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 600;
			color: #00ba95;
			font-size: 32rpx;
		}
	}

	& /deep/ .u-cell {
		& .u-cell__body {
			padding: 32rpx;
			background: #fff;
		}
	}
}
</style>
